<!-- 
适配布局
    --》媒体查询：调整不同设备宽度
    --》通过媒体查询影响html设置font-size大小
    --》rem单位：设置页面元素大小
媒体查询+rem单位
    可以让不同设备宽度，影响页面元素大小的动态变化
    即：根据屏幕尺寸变化自动调整页面元素大小

媒体查询--》不同设备宽度--》html--》font-size--》rem--》页面元素大小
 -->
<style>
    @media screen and (max-width: 320px) {
        html {
            font-size: 50px;
        }
    }
    @media screen and (min-width: 320px) {
        html {
            font-size: 100px;
        }
    }
    @media screen and (min-width: 640px) {
        html {
            font-size: 150px;
        }
    }
    @media screen and (min-width: 960px) {
        html {
            font-size: 200px;
        }
    }
    @media screen and (min-width: 1280px) {
        html {
            font-size: 250px;
        }
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    div {
        height: 1rem;
        font-size: 0.5rem;
        background-color: red;
        color: #fff;
        text-align: center;
        line-height: 1rem;
    }
</style>

<div>hello,world</div>
